<template>
  <div class="cesium-draw">
    <div id="cesium-drawer" />

    <a-dropdown>
      <a class="ant-dropdown-link tools" @click.prevent>
        {{ drawingModeText }}
        <DownOutlined />
      </a>

      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item v-for="(e, index) in types" :key="e.key">{{ e.text }}</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>

    <div class="mouse-postion">{{ nowPostion.wgs84 }}</div>
  </div>
</template>

<script>
//参考填挖方： https://www.cnblogs.com/giserhome/p/11374089.html
// import cesiumEarth from '../components/cesium-tdt.vue';
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, onMounted, h } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import MousePosition from './utils/mousePosition.js';
// import Measure from './utils/measure.js';
import { measureLineSpace } from './utils/measure/line';
import { measureAreaSpace } from './utils/measure/area';

export default defineComponent({
  components: { DownOutlined, EditOutlined },
  setup() {
    return {
      viewer: null
    };
  },
  data() {
    return {
      drawingMode: 'polygon',
      types: [
        {
          text: '长度',
          key: 'line',
          fn: measureLineSpace
        },
        {
          text: '面积（多边形）',
          key: 'polygon',
          fn: measureAreaSpace
        },
        {
          text: '面积（圆）',
          key: 'circle',
          fn: measureLineSpace
        },
        {
          text: '面积（矩形）',
          key: 'rectangle',
          fn: measureLineSpace
        }
      ],
      nowPostion: {}
    };
  },
  computed: {
    drawingModeText() {
      const { drawingMode, types } = this;
      return types.filter(e => e.key === drawingMode)[0].text;
    }
  },
  watch: {
    drawingMode(t) {
      if (this.viewer) {
        const typ = this.getType(t);
        typ.fn(this.viewer);
      }
    }
  },
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
  methods: {
    getType(k) {
      return this.types.filter(e => e.key === k)[0];
    },
    handleMenuClick(e) {
      // this.terminateShape();
      this.drawingMode = e.key;
    },
    onViewerInited(viewer) {
      let vm = this;
      new MousePosition(viewer, pos => {
        vm.nowPostion = pos;
      });
      this.drawingMode = 'line';
      // measureLineSpace(viewer);
    },
    initViewer() {
      let vm = this;
      // Grant CesiumJS access to your ion assets
      Cesium.Ion.defaultAccessToken = $accessToken.default;
      // var rectangle = new Cesium.Rectangle(
      //   Cesium.Math.toRadians(5.9993076),
      //   Cesium.Math.toRadians(-0.00025749207),
      //   Cesium.Math.toRadians(7.00078),
      //   Cesium.Math.toRadians(1.001215)
      // );

      var terrainProvider = Cesium.createWorldTerrain();
      var viewer = new Cesium.Viewer('cesium-drawer', {
        animation: false,
        // baseLayerPicker: false,
        fullscreenButton: false,
        vrButton: false,
        homeButton: false,
        timeline: false,
        // imageryProvider: imgTileServiceImageryProviderCreator(),
        selectionIndicator: false,
        infoBox: false,
        // 注释时相当于使用默认地形，解开注释相当于使用全球地形
        terrainProvider
      });
      this.viewer = viewer;

      viewer.scene.globe.depthTestAgainstTerrain = true;

      // viewer.scene.camera.flyTo({ destination: rectangle });

      // // Zoom in to an area with mountains
      // viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0), new Cesium.Cartesian3(5000.0, 5000.0, 5000.0));
      // viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

      viewer.camera.setView({
        destination: new Cesium.Cartesian3(-548184.7982559408, 5512367.059463563, 3173625.2210259973),
        orientation: {
          heading: 5.683499859605618,
          pitch: -0.3430291183891061,
          roll: 6.281444671468591
        }
      });

      this.onViewerInited(viewer);
    }
  }
});
</script>

<style scoped lang="less">
.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;

  .tools {
    position: absolute;
    top: 57px;
    left: 7px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.6;
    transition: all 500ms;
    &:hover {
      opacity: 0.8;
    }
  }

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.cesium-viewer-bottom) {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }
}
</style>
